<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
  class Son extends React.Component{
    // props将要接受的时候调用
    componentWillReceiveProps(){
      console.log("组件son：","componentWillReceiveProps")
    }


    // 控制组件更新的阀门
    shouldComponentUpdate(){
      console.log("son - houldComponentUpdate")
      return true  // true，继续执行， false，组件更新中断 
    }
    
    // 将要更新
    componentWillUpdate(){
      console.log("son - componentWillUpdate")
    }

    // 更新之后
    componentDidUpdate(){
      console.log("son- componentDidUpdate")
    }
    render(){
      console.log("son- render")
      return(
        <div>我是子组件son, 我的值是：{this.props.count}</div>
      )
    }
  }


  
  class Count extends React.Component{
    constructor(props){
      console.log("count-constructor")
      super(props)
      this.state =  {count: 0}
    }

    componentWillMount(){
      console.log("componentWillMount")
    }

    componentDidMount(){
      console.log("componentDidMount")
    }
    // 组件将要卸载的狗子
    componentWillUnmount(){
      console.log("componentWillUnmount")
    }

    // 控制组件更新的阀门
    shouldComponentUpdate(){
      console.log("shouldComponentUpdate")
      return true  // true，继续执行， false，组件更新中断 
    }
    
    // 将要更新
    componentWillUpdate(){
      console.log("componentWillUpdate")
    }

    // 更新之后
    componentDidUpdate(){
      console.log("componentDidUpdate")
    }

    add=()=>{
      this.setState({count: ++this.state.count})
    }

    rm =()=>{
      // 卸载DOM
      ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    }

    force=()=>{
      this.forceUpdate()  // 强制更新，会绕过shouldComponentUpdate，走后续的狗子
    }

    render(){
      const {count} = this.state
      console.log("render")
      return (
        <div>
          <h2>当前求和为{count}</h2>
          <button onClick={this.add}>点我+1</button>
          <button onClick={this.rm}>卸载组件</button>
          <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>

          <Son count={this.state.count}/>
        </div>
      )
    }
  }

  ReactDOM.render(<Count />, document.getElementById('root'))
</script>
</html>
